import React, {Component} from 'react';
import {Button, DatePicker, Form, Input, Radio, Select} from 'antd';

import "./app.css";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            logs: [],
            repo: "aisquare-app-enhance-repository",
            user: "",
            branch: "remotes/origin/dev",
            keyword: '',
            since: '',
            before: '',
            branches: [],
        }
        this.handleClick = this.handleClick.bind(this)

    }

    componentDidMount() {
        this.getBranches(this.state.repo)
    }

    handleClick() {
        const query = {
            branch: this.state.repo,
            user: this.state.user,
        }
        fetch(`/logs/${this.state.repo}?branch=${this.state.branch}&user=${this.state.user}&keyword=${this.state.keyword}&since=${this.state.since}&before=${this.state.before}`, {
            method: 'GET',
            query,
        })
            .then(res => res.json()).then(data => {
            this.setState({logs: data})
        }).catch(e => console.log('错误', e))
    }

    changeRepo(e) {
        this.setState({repo: e.target.value})
        this.getBranches(e.target.value)
        this.handleClick()
    }

    changeUser(e) {
        this.setState({
            user: e.target.value
        })
    }

    changeKeyword(e) {
        this.setState({
            keyword: e.target.value
        })
    }

    onChangeSince(dateString) {
        this.setState({
            since: dateString
        })
    }

    onChangeBefore(dateString) {
        this.setState({
            before: dateString
        })
    }

    handleChangeBranch(value) {
        this.setState({
            branch: value,
        })
    }

    getBranches(repo) {
        fetch(`/branches/${repo}`).then(res => res.json()).then(data => {
            this.setState({
                branches: data,
            })
        })
    }

    render() {
        const {Option} = Select;
        return (
            <div>
                <Form
                    labelCol={{span: 4}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                >
                    <Form.Item label="仓库">
                        <Radio.Group defaultValue={this.state.repo} size="large" onChange={(e) => this.changeRepo(e)}>
                            <Radio.Button value="aisquare-app-enhance-repository">
                                aisquare-app-enhance-repository
                            </Radio.Button>
                            <Radio.Button value="aisquare-ui-repository">
                                aisquare-ui-repository
                            </Radio.Button>
                            <Radio.Button value="aisquare-foundation-repository">
                                aisquare-foundation-repository
                            </Radio.Button>
                            <Radio.Button value="aisquare-rl-repository">
                                aisquare-rl-repository
                            </Radio.Button>
                            <Radio.Button value="aisquare-fed-repository">
                                aisquare-fed-repository
                            </Radio.Button>
                            <Radio.Button value="aisquare-fed-front-repository">
                                aisquare-fed-front-repository
                            </Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="分支选择">
                        <Select showSearch style={{width: '100%'}}
                                onChange={(value) => this.handleChangeBranch(value)}
                                filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                defaultValue={this.state.branch}
                        >
                            {this.state.branches && this.state.branches.map(
                                (item, index) => (
                                    <Option value={item} key={item}>{item}</Option>
                                ))}
                        </Select>
                    </Form.Item>
                    <Form.Item label="开始时间">
                        <DatePicker onChange={(date, dateString) => this.onChangeSince(dateString)}/>
                    </Form.Item>
                    <Form.Item label="结束时间">
                        <DatePicker onChange={(date, dateString) => this.onChangeBefore(dateString)}/>
                    </Form.Item>
                    <Form.Item label="提交人">
                        <Input placeholder="提交人" onChange={(e) => this.changeUser(e)}/>
                    </Form.Item>
                    <Form.Item label="关键字">
                        <Input placeholder="关键字" onChange={(e) => this.changeKeyword(e)}/>
                    </Form.Item>
                    <Button type="primary" onClick={this.handleClick}>查询</Button>
                </Form>
                <ul className="Logs">
                    {this.state.logs && this.state.logs.map((item, index) => (
                        <li key={index} className="LogItem">
                            <div className="LineLeft">
                                <span className="Comment">{item.Comment}</span>
                            </div>
                            <div className="LineRight">
                                <span className="Author">{item.Author}</span>
                                <span className="Date">{item.Date} </span>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }


}


export default App;
